<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .order-status {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .table-row-hover {
                @apply hover:bg-gray-50 transition-colors;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
<!-- 顶部导航 -->
<header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <a href="${pageContext.request.contextPath}/index.jsp" class="text-blue-600 font-bold text-xl flex items-center">
            <i class="fa fa-shopping-bag mr-2"></i>
            <span>购物商城</span>
        </a>
        <div class="flex items-center space-x-6">
            <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">
                <i class="fa fa-user-o mr-1"></i> 我的账户
            </a>
            <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">
                <i class="fa fa-list-alt mr-1"></i> 我的订单
            </a>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8">
    <!-- 订单状态提示 -->
    <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <i class="fa fa-check-circle text-green-500 text-xl mt-0.5"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-green-800 font-medium">支付成功</h3>
                <div class="mt-1 text-green-700 text-sm">
                    您的订单已支付完成，我们将尽快为您发货
                </div>
            </div>
            <div class="ml-auto">
                <span class="order-status bg-green-100 text-green-800">已支付</span>
            </div>
        </div>
    </div>

    <!-- 订单信息卡片 -->
    <div class="bg-white rounded-xl shadow-sm mb-8 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100">
            <h2 class="text-lg font-semibold text-gray-800">订单信息</h2>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 左侧订单基本信息 -->
                <div>
                    <h3 class="text-sm font-medium text-gray-500 mb-3">订单详情</h3>
                    <ul class="space-y-3">
                        <li class="flex justify-between">
                            <span class="text-gray-600">订单编号</span>
                            <span class="font-medium">${order.orderNo}</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-600">下单时间</span>
                            <span>${order.createTime}</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-600">支付时间</span>
                            <span>${order.payTime}</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-600">支付方式</span>
                            <span>
                                    <i class="fa fa-credit-card text-blue-500 mr-1"></i>
                                    支付宝
                                </span>
                        </li>
                    </ul>
                </div>

                <!-- 右侧收货信息 -->
                <div>
                    <h3 class="text-sm font-medium text-gray-500 mb-3">收货信息</h3>
                    <ul class="space-y-3">
                        <li class="flex justify-between">
                            <span class="text-gray-600">收货人</span>
                            <span>${order.recipientName}</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-600">联系电话</span>
                            <span>${order.recipientPhone}</span>
                        </li>
                        <li class="flex flex-col items-start">
                            <span class="text-gray-600 self-start mb-1">收货地址</span>
                            <span class="text-left">${order.recipientAddress}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 商品明细 -->
    <div class="bg-white rounded-xl shadow-sm mb-8 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100">
            <h2 class="text-lg font-semibold text-gray-800">商品明细</h2>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">商品信息</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单价</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">小计</th>
                </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                <!-- 商品列表 -->
                <c:forEach items="${order.orderItems}" var="item">
                    <tr class="table-row-hover">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="h-12 w-12 flex-shrink-0">
                                    <img class="h-12 w-12 object-cover rounded" src="${item.productImage}" alt="${item.productName}">
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">${item.productName}</div>
                                    <div class="text-sm text-gray-500">ID: ${item.productId}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥${item.unitPrice}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.quantity}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">¥${item.totalPrice}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 支付信息 -->
    <div class="bg-white rounded-xl shadow-sm mb-8 overflow-hidden max-w-2xl ml-auto">
        <div class="px-6 py-4 border-b border-gray-100">
            <h2 class="text-lg font-semibold text-gray-800">支付信息</h2>
        </div>

        <div class="p-6">
            <ul class="space-y-3 text-sm">
                <li class="flex justify-between">
                    <span class="text-gray-600">商品总价</span>
                    <span>¥${order.productTotalPrice}</span>
                </li>
                <li class="flex justify-between">
                    <span class="text-gray-600">运费</span>
                    <span>¥ 10</span>
                </li>
                <li class="flex justify-between">
                    <span class="text-gray-600">优惠金额</span>
                    <span class="text-green-600">-¥${order.discountAmount}</span>
                </li>
                <li class="flex justify-between pt-3 border-t border-gray-100 mt-3">
                    <span class="font-medium">实付金额</span>
                    <span class="font-bold text-lg text-red-600">¥${order.payAmount}</span>
                </li>
            </ul>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="flex flex-col sm:flex-row justify-center gap-4 mb-12">
        <a href="${pageContext.request.contextPath}/index.jsp" class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors">
            <i class="fa fa-home mr-2"></i> 返回首页
        </a>
        <a href="${pageContext.request.contextPath}/user/orders" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-lg shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
            <i class="fa fa-list-alt mr-2"></i> 查看所有订单
        </a>
        <button class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-lg shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
            <i class="fa fa-share-alt mr-2"></i> 分享订单
        </button>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200">
    <div class="container mx-auto px-4 py-8">
        <div class="text-center text-gray-500 text-sm">
            <p>© 2023 购物商城 版权所有</p>
            <p class="mt-1">客服热线：400-123-4567</p>
        </div>
    </div>
</footer>

<script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 可以在这里添加一些交互功能
        console.log('订单详情页面加载完成');
    });
</script>
</body>
</html>
